<!--
功能：打印表格数据
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2023-12-04 10:52:17
-->
<template>
    <div>
      <a-modal
        v-model:open="visible"
        title="打印表格数据"
        :width="650"
        @ok="handleConfirm"
        @cancel="handleCancel"
      >
        <a-form
          :model="formData"
          ref="formRef"
          :rules="formRule"
          layout="vertical"
          class="form-container"
        >
          <a-row :gutter="10">
            <a-col :span="12">
              <a-form-item label="打印表名" name="sheetName" class="form-container-item">
                <a-input v-model:value="formData.sheetName" placeholder="请输入打印表名" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="打印文件数据源" name="mode" class="form-container-item">
                <a-select v-model:value="formData.mode" placeholder="请选择打印数据源">
                  <a-select-option value="current">当前页数据</a-select-option>
                  <a-select-option value="selected">当前页选中数据</a-select-option>
                  <a-select-option value="all">全部数据（需服务端支持）</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="打印文件指定列" class="form-container-item">
                <div class="checkbox">
                  <div class="checkbox-flex">
                    <a-row :gutter="10">
                      <a-col :span="6">
                        <div class="checkbox-item" style="margin-top: 0px" @click="handleSelectAll">
                          <div class="checkbox-icon">
                            <i
                              class="iconfont fuxuankuang-quanxuan"
                              :style="activeStyles"
                              style="font-size: 20px; margin-right: 4px"
                              v-if="checkAllState == 'entire'"
                            ></i>
                            <i
                              class="iconfont fuxuankuang-weiquanxuan"
                              :style="activeStyles"
                              style="font-size: 20px; margin-right: 4px"
                              v-if="checkAllState == 'sectional'"
                            ></i>
                            <i
                              class="iconfont a-zhengfangxingfuxuankuang"
                              style="font-size: 20px; margin-right: 4px; color: #d9d9d9"
                              v-if="checkAllState == 'none'"
                            ></i>
                          </div>
                          <span>全选/取消全选</span>
                        </div>
                      </a-col>
                      <a-col :span="24">
                        <div class="checkbox-line"></div>
                      </a-col>
                      <template v-for="(item, index) in formData.columns" :key="index">
                        <a-col :span="6" v-if="item.field">
                          <div class="checkbox-item" @click="handleSelectItem(item)">
                            <i
                              class="iconfont fuxuankuang-quanxuan"
                              :style="activeStyles"
                              style="font-size: 20px; margin-right: 4px"
                              v-if="item.print"
                            ></i>
                            <i
                              class="iconfont a-zhengfangxingfuxuankuang"
                              style="font-size: 20px; margin-right: 4px; color: #d9d9d9"
                              v-else
                            ></i>
                            <span>{{ item.title }}</span>
                          </div>
                        </a-col>
                      </template>
                    </a-row>
                  </div>
                </div>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, watch, computed } from 'vue'
  import useSettingsStore from '@/store/modules/settings'
  //仓库实例化
  const settingsStore = useSettingsStore()
  const props = defineProps({
    // 配置属性
    modalData: {
      type: Object,
      default: {}
    },
    // 模态框状态
    modalState: {
      type: Boolean,
      default: false
    }
  })
  // 侧边栏主题
  const themeColor = computed(() => {
    return settingsStore.themeColor
  })
  // 选中样式
  const activeStyles = computed(() => {
    return {
      color: themeColor.value
    }
  })
  // 模态框状态
  const visible = ref(props.modalState)
  // 对象数组
  const formData = reactive({
    sheetName: '', // 表名
    mode: 'current', // 输出数据的方式
    columns: [], // 指定列
    data: [] // 数据
  })
  // 全选状态
  const checkAllState = computed(() => {
    let state = 'none' // entire 全部选中  sectional 部分选中 none 全部未选中
    const originalArr = formData.columns.filter((item) => item.field)
    const filteredArr = formData.columns.filter((item) => item.print && item.field)
    if (filteredArr.length > 0) {
      state = 'sectional'
    }
    if (filteredArr.length === originalArr.length) {
      state = 'entire'
    }
    return state
  })
  // 表单规则
  const formRule = {
    mode: [{ required: true, message: '表单必填项不能为空', trigger: 'blur' }]
  }
  // 选择列
  const handleSelectItem = (event) => {
    event.print = !event.print
  }
  // 全选取消全选
  const handleSelectAll = () => {
    if (checkAllState.value === 'entire') {
      formData.columns.forEach((item) => {
        item.print = false
      })
    } else {
      formData.columns.forEach((item) => {
        item.print = true
      })
    }
  }
  // 派发事件
  const emits = defineEmits(['onConfirm', 'onCancel'])
  // 确认
  const handleConfirm = () => {
    emits('onConfirm', formData)
  }
  // 取消
  const handleCancel = () => {
    emits('onCancel')
  }
  // 监听数据
  watch(
    () => props.modalState,
    (val) => {
      visible.value = val
      for (let key in props.modalData) {
        if (props.modalData[key] !== null && props.modalData[key] !== undefined) {
          formData[key] = props.modalData[key]
        }
      }
    },
    { deep: true, immediate: true }
  )
  </script>
  <style lang="scss" scoped>
  .form-container {
    margin-top: 10px;
    &-item {
      margin-bottom: 12px;
    }
  }
  .checkbox {
    .checkbox-item {
      color: rgba(0, 0, 0, 0.88);
      font-size: 14px;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      border: 1px solid #d9d9d9;
      padding: 0px 10px;
      height: 33px;
      margin-top: 10px;
      cursor: pointer;
      border-radius: 4px;
    }
    .checkbox-line {
      height: 1px;
      background-color: #e8eaec;
      margin-top: 10px;
    }
  }
  </style>
  